<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/struts-tags.tld" prefix="s"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>喜乐康智能家居系统</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
  	<script type="text/javascript">
  	leftAddDeviceId = 0;
  	var leftAddDeviceName;
	var leftAddDeviceType;
  	var leftAddIndex = 0;
  	var pressClass ;
  	var settingSceneDeviceListCurrentPage = 1;
	function settingSceneDeviceListUp(upDown){
		 listOpenUp(settingSceneDeviceListCurrentPage,"settingSceneDeviceListCurrentPage",<s:property value="deviceList.size()"/>,10,
				 "setting_scene_left_bottom_list_up",
				 "up_s.png",
				 "up_press_s.png",
				 "left_scene_device_list_img_li",upDown);
	}
	
	
	function settingSceneDeviceListDown(upDown){
		listOpenDown(settingSceneDeviceListCurrentPage,"settingSceneDeviceListCurrentPage",<s:property value="deviceList.size()"/>,10,
				"setting_scene_left_bottom_list_down",
				"down_s.png",
				"down_press_s.png",
				"left_scene_device_list_img_li",upDown);
		
	}

	function pressLeftDevice(index,deviceId,deviceType){
		var className = $("#left_scene_device_list_img_li"+index).attr("className");
		if(leftAddDeviceId!=0){
			$("#left_scene_device_list_img_li"+leftAddIndex).attr("className",pressClass);
		}
		pressClass = className;
		leftAddIndex = index;
		if(className.indexOf("device_use_img_li_on_off_s") != -1){
			$("#left_scene_device_list_img_li"+index).attr("className","device_use_img_li_on_off_press_s");
		}else if(className.indexOf("device_use_img_li_turn_s") != -1){
			$("#left_scene_device_list_img_li"+index).attr("className","device_use_img_li_turn_press_s");
		}else if(className.indexOf("device_use_img_li_socket_s") != -1){
			$("#left_scene_device_list_img_li"+index).attr("className","device_use_img_li_socket_press_s");
		}
		leftAddDeviceId = deviceId;
		leftAddDeviceName = $("#left_scene_device_list_img_li"+leftAddIndex).text();
		leftAddDeviceType = deviceType;
	}

	function addList(upDown){
		if(leftAddDeviceId==0){
			if(upDown == 'down'){
				alert("请选择要加入的面板！");
			}
			return;
		}else{
			if(upDown == 'down'){
				$(".setting_scene_add_list").css("background-image","url('"+evn_Path+"resource/setting_scene_add_list_press.png')");
			}else if(upDown == 'up'){
				var roomId = $("#roomId").val();
				var roomName = $("#roomId").find("option:selected").text();
				if(roomId!=0){
					if($("#setting_scene_detail_room"+roomId).length>0){
						if($("#right_scene_device_list_img_li"+leftAddDeviceId).length > 0){
							alert("该面板列表中已经存在！");
						}else{
							$("#setting_scene_detail_deviceList"+roomId).append(addDeviceHtml());
						}
					}else{
						var sb = "<div id=\"setting_scene_detail_room"+roomId+"\" class=\"setting_scene_detail\">";
  						sb+="<div style=\"width: 50px; float: left; font-size: 13px; font-weight: bold; margin-top: 5px;\">"+roomName+"</div>";
  						
  						sb+="<div id=\"setting_scene_detail_deviceList"+roomId+"\" style=\"width: 240px; float: left; margin-left: 5px;\">";
  						sb+=addDeviceHtml();
  						sb+="</div>";
  						
  						sb+="<div class=\"clear\"></div></div>";		
  							
  						$(".setting_scene_right_detail_left_list").append(sb);
					}
				}
				$(".setting_scene_add_list").css("background-image","url('"+evn_Path+"resource/setting_scene_add_list.png')");
			}
		}
	}

	function addDeviceHtml(){
		var sb ="";
		sb+="<div deviceId='"+leftAddDeviceId+"' level='0' isOpen='0' name='sceneDeviceListName' onclick='pressRightDevice("+leftAddDeviceId+","+leftAddDeviceType+")'";
		sb+=" style=\"position: relative; margin-bottom: 12px; font-size: 12px;\" ";
		if(leftAddDeviceType == 1){
			sb+=" class=\"device_use_img_li_on_off_s\" ";
		}else if(leftAddDeviceType == 2){
			sb+=" class=\"device_use_img_li_turn_s\" ";
		}else if(leftAddDeviceType == 3){
			sb+=" class=\"device_use_img_li_socket_s\" ";
		}
		
		sb+="id=\"right_scene_device_list_img_li"+leftAddDeviceId+"\">"+leftAddDeviceName+"</div>";
		return sb;
	}
	
  	</script>
  	
  </head>
  
  <body>
  	<div style="height: 160px;">
	  	<div class="setting_scene_left_bottom_list_item">
			<s:iterator id="device" value="deviceList" status="status">
				<div onclick="pressLeftDevice(<s:property value="#status.index+1" />,<s:property value="deviceId" />,<s:property value="deviceType" />);"  id="left_scene_device_list_img_li<s:property value="#status.index+1" />" 
					<s:if test="deviceType==1">
						class="device_use_img_li_on_off_s"
	 				</s:if>	
	 				<s:if test="deviceType==2">
			 			class="device_use_img_li_turn_s"
	 				</s:if>	
	 				<s:if test="deviceType==3">
			 			class="device_use_img_li_socket_s"
	 				</s:if>	
					style="position: relative;margin-bottom:8px;font-size:12px;
					<s:if test="#status.index+1 > 10">
			 					display:none;
			 		</s:if>	
			 		"
					><s:property value="deviceName"/>
				</div>
			</s:iterator>
		</div>
		<div class="setting_scene_left_bottom_list_up_down">
			<div class="setting_scene_left_bottom_list_up" onmousedown="settingSceneDeviceListUp('down')" onmouseup="settingSceneDeviceListUp('up')"></div>
			<div class="setting_scene_left_bottom_list_down" onmousedown="settingSceneDeviceListDown('down')" onmouseup="settingSceneDeviceListDown('up')"></div>
		</div>
	</div>
	<div class="setting_scene_add_list" onmousedown="addList('down')" onmouseup="addList('up')">
		加入列表 >>
	</div>
	 
  </body>
</html>
